<!-- 公告列表 -->
<template>
    <PageTable ref="pageTableRef" :headers="tableHeaders" allow-search :search-form="searchForm"
        :loadCallable="loadCallable" :btns="btns">
    </PageTable>


    <!-- BEGIN 新增弹框 -->
    <el-dialog :close-on-click-modal="false" class="dialog-form-with-content" v-model="addNoticeForm.showDialog"
        :draggable="true" header="新增">
        <el-form ref="addNoticeFormRef" :model="addNoticeForm.formData" :rules="addNoticeForm.rules" label-width="auto">

            <el-form-item label="标题" prop="title">
                <el-input v-model="addNoticeForm.formData.title" name="title"></el-input>
            </el-form-item>

            <el-form-item label="客户端排序值" prop="sort">
                <el-input v-model="addNoticeForm.formData.sort" name="sort"></el-input>
            </el-form-item>

            <el-form-item label="显示状态" prop="show_status">
                <el-switch v-model="addNoticeForm.formData.show_status" :active-value="CommonCode.SHOW"
                    :inactive-value="CommonCode.HIDE" />
            </el-form-item>

            <el-form-item label="内容" prop="content">
                <WEditor :key="addNoticeForm.uuid" v-model:value-html="addNoticeForm.formData.content"></WEditor>
            </el-form-item>

            <el-button :loading="addNoticeForm.onSubmiting" type="primary"
                @click="onAddSubmit(addNoticeFormRef)">提交</el-button>
        </el-form>
    </el-dialog>
    <!-- END 新增弹框  -->

    <!-- BEGIN 编辑弹框 -->
    <el-dialog :close-on-click-modal="false" class="dialog-form-with-content" v-model="editNoticeForm.showDialog"
        :draggable="true" header="编辑">
        <el-form ref="editNoticeFormRef" :model="editNoticeForm.formData" label-width="auto">
            <el-form-item label="标题" prop="title">
                <el-input v-model="editNoticeForm.formData.title" name="title"></el-input>
            </el-form-item>

            <el-form-item label="客户端排序值" prop="sort">
                <el-input v-model="editNoticeForm.formData.sort" name="sort"></el-input>
            </el-form-item>

            <el-form-item label="显示状态" prop="show_status">
                <el-switch v-model="editNoticeForm.formData.show_status" :active-value="CommonCode.SHOW"
                    :inactive-value="CommonCode.HIDE" />
            </el-form-item>

            <el-form-item label="内容" prop="content">
                <WEditor :key="editNoticeForm.uuid" v-model:value-html="editNoticeForm.formData.content"></WEditor>
            </el-form-item>


            <el-button :loading="editNoticeForm.onSubmiting" type="primary"
                @click="onEditSubmit(editNoticeFormRef)">提交</el-button>
        </el-form>
    </el-dialog>
    <!-- END 编辑弹框  -->
</template>

<script setup>
import PageTable from '@/components/PageTable.vue';
import WEditor from '@/components/WEditor.vue';
import { ref } from 'vue';
import msgUtil from '@/utils/msgUtil'

import str from '@/utils/str'
import arr from '@/utils/arr'

import noticeApi from '@/api/notice';
import CommonCode from '@/constants/CommonCode'

const showStatusArr = CommonCode.textOfShowStatus()

// pagetable的引用
const pageTableRef = ref();

// 表格列设置,如果需要动态设置则用 ref包裹
const tableHeaders = [
    {
        prop: 'id',
        label: 'ID',
        width: 50
    },
    {
        prop: 'title',
        label: '标题',

    },
    {
        prop: 'sort',
        label: '排序值',
    },
    {
        prop: 'show_status',
        label: '客户端显示',
        template(row) {
            return '<text class="show-status-' + row.show_status + '">' +
                CommonCode.textOfShowStatus('' + row.show_status) + '</text>'

        }
    }
]

// 搜索表单
const searchForm = ref({
    formItems: [
        {
            name: 's_title',
            type: 'text',
            placeholder: '标题',
        },
        {
            name: 'show_status',
            type: 'select',
            placeholder: '显示状态',
            options: [
                {
                    label: '全部',
                    value: '',
                },
                {
                    label: CommonCode.textOfShowStatus(CommonCode.SHOW),
                    value: CommonCode.SHOW,
                },
                {
                    label: CommonCode.textOfShowStatus(CommonCode.HIDE),
                    value: CommonCode.HIDE,
                },
            ]
        },
    ]
})

// 加载数据的接口 Promise
const loadCallable = noticeApi.noticePageList;

// 表格顶部区域的按钮
const btns = {
    // 删除选中按钮
    deleteAll: {
        text: '删除选中',
        click(ids) {
            noticeApi.delNotice(ids).then(res => {
                msgUtil.handleApiRes(res, {
                    onApiSuccess() {
                        pageTableRef.value.initPageData();
                    }
                });
            })
        }
    },
    add: {
        text: '新增',
        click() {
            initaddNoticeFormData();
            addNoticeForm.value.uuid = str.now();
            addNoticeForm.value.showDialog = true;
        }
    },

    rowBtns: [{
        text: '编辑',
        click(rows, idx) {

            noticeApi.detail(rows.id)
                .then((res) => {
                    msgUtil.alertIfError(res).then(r => {
                        editNoticeForm.value.formData = arr.coverFieldType(r.data.info, {
                            show_status: 'string'
                        });
                        editNoticeForm.value.uuid = str.now()
                        editNoticeForm.value.showDialog = true;
                    })
                })

        },
    },]
};

// 新增表单引用
const addNoticeFormRef = ref()

// 初始化新增表单
function initaddNoticeFormData() {
    addNoticeForm.value.formData = {
        title: '',
        sort: 0,
        content: '',
        show_status: CommonCode.SHOW,
    }
}

// 新增表单数据
const addNoticeForm = ref({
    showDialog: false,
    onSubmiting: false,
    uuid: '',
    rules: {
        title: [{ required: true, message: '必填', type: 'string' }],
        sort: [
            {
                required: true, message: '整数>=0',
                trigger: 'blur',
                validator(rule, value, callback) {

                    if (str.isNaturalNumber(value)) {
                        callback()
                    } else {
                        callback(new Error('必须是自然数,0,1,2...'))
                    }
                }
            }
        ],
        content: [{ required: true, message: '必填', type: 'string' }]
    },
    formData: {}
})

// 新增提交
function onAddSubmit(formEl) {
    formEl.validate((valid, fields) => {
        if (!valid) {
            return;
        }
        if (addNoticeForm.value.onSubmiting) {
            return;
        }
        addNoticeForm.value.onSubmiting = true;
        noticeApi.addNotice(addNoticeForm.value.formData)
            .then(res => {
                msgUtil.handleApiRes(res, {
                    onApiSuccess() {
                        addNoticeForm.value.showDialog = false
                        pageTableRef.value.initPageData();
                    }
                })
            })
            .finally(() => {
                addNoticeForm.value.onSubmiting = false;
            })
    })
}


// 编辑更新
const editNoticeFormRef = ref();

// 编辑表单
const editNoticeForm = ref({
    showDialog: false,
    onSubmiting: false,
    uuid: '',
    rules: {
        title: [{ required: true, message: '必填', type: 'string' }],
        sort: [
            {
                required: true, message: '整数>=0',
                trigger: 'blur',
                validator(rule, value, callback) {

                    if (str.isNaturalNumber(value)) {
                        callback()
                    } else {
                        callback(new Error('必须是自然数,0,1,2...'))
                    }
                }
            }
        ],
        content: [{ required: true, message: '必填', type: 'string' }]
    },
    formData: {
        id: 0,
        title: ''
    }
})

// 编辑提交

function onEditSubmit(formEl) {
    formEl.validate((valid, fields) => {
        if (!valid) {
            return;
        }
        if (editNoticeForm.value.onSubmiting) {
            return;
        }
        editNoticeForm.value.onSubmiting = true;
        noticeApi.updateNotice(editNoticeForm.value.formData)
            .then(res => {
                msgUtil.handleApiRes(res, {
                    onApiSuccess() {
                        editNoticeForm.value.showDialog = false
                        pageTableRef.value.initPageData();
                    }
                })
            })
            .finally(() => {
                editNoticeForm.value.onSubmiting = false;
            })
    })
}

</script>